<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <!-- 小于768px 满屏显示 -->
      <el-col :span="12" :xs="24">
        <!-- 右侧表单 -->
        <el-form class="login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <el-form-item prop="username">
            <el-input placeholder="请输入账户" :prefix-icon="User" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入密码" @keyup.enter="login" :prefix-icon="Lock" :show-password="true"
              v-model="loginForm.password" type="password" style="background-color: #fff; border-radius: 10px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="login" :loading="loading">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup name="login">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useUserStore from '@/store/modules/user'
import { ElMessage, ElNotification } from 'element-plus'
import { getTime } from '@/utils/time'
const route = useRoute()
const userStore = useUserStore()
const router = useRouter()

const loginFormRef = ref(null) as any
// 收集表单数据
const loginForm = reactive({
  username: 'admin',
  password: '111111',
})
const loginFormRules = {
  username: [
    { required: true, message: '请输入账户', trigger: 'blur' },
    {
      required: true,
      min: 3,
      max: 6,
      message: '长度在 3 到 6 个字符',
      trigger: 'blur',
    },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      required: true,
      min: 6,
      max: 16,
      message: '长度在 6 到 16 个字符',
      trigger: 'blur',
    },
  ],
}
// 定义控制按钮加载
const loading = ref(false)
// 登录按钮回调
const login = async () => {
  // 通知仓库发送登录请求
  // 请求成功跳至首页
  // 反之弹出登录失败的信息
  //@ts-ignore
  loginFormRef.value.validate(async (flag) => {
    console.log(flag)
    if (!flag) {
      ElMessage.error('请检查输入')
      return
    }
    loading.value = true
    try {
      // 保证登陆成功
      await userStore.userLogin(loginForm)
      // 判断是否有query参数，如果有，跳转到该地址
      // 没有，跳转到默认地址
      if (route.query.redirect) {
        //@ts-ignore
        router.push(route.query.redirect)
      } else {
        router.push('/')
      }
      ElNotification.success({
        title: `Hi~ ${getTime()}好`,
        message: '欢迎回来',
      })
      loading.value = false
      getTime()
    } catch (error) {
      //@ts-ignore
      ElNotification.error(error.message)
      loading.value = false
    }
  })
}
</script>
<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;

  .login_form {
    position: relative;
    padding: 30px;
    width: 80%;
    top: 30vh;
    background: url('@/assets/images/login_form.png') no-repeat;
    background-size: cover;

    h1 {
      color: #fff;
      font-size: 40px;
    }

    h2 {
      font-size: 20px;
      color: #fff;
      margin: 20px 0;
    }
  }
}
</style>
